function Sprite(img_file, anchoFrame, altoFrame, posXInicial, posYInicial) {
	var that = this;
	this.imagen = new Image();
	this.imagen.onload = function(){ 
		that.is_ready = true;
	}
	this.imagen.src = img_file;
	this.posXInicial = posXInicial;
	this.posX = posXInicial;
	this.posY = posYInicial;
	this.alto = altoFrame;
	this.ancho = anchoFrame;
	this.frame = 0;		
	this.drawImage = function(contexto) {
		if(this.is_ready){
			contexto.drawImage(this.imagen, this.frame * this.ancho, 0, this.ancho, this.alto, this.posX, this.posY, this.ancho, this.alto);
			this.frame = (this.frame + 1)%3;				
			this.posX = this.posX - 6;
			if (this.posX < 0)
				this.posX = this.posXInicial;					
		}
	}	
}

function Principal(pcanvas) {
	this.canvas = pcanvas;
	this.contexto = pcanvas.getContext("2d");
	this.ancho = pcanvas.width;
	this.alto = pcanvas.height;
	this.sprite = new Sprite("prota_paso.png", 64, 118, 800, 270);	
	this.drawFrame = function(){
		this.contexto.clearRect(0,0,this.ancho,this.alto);
		this.sprite.drawImage(this.contexto);
	}
}


window.onload = function() {
	var principal = new Principal(document.getElementById("canvasMov"));
	setInterval(function(){principal.drawFrame()}, 60);
}
